<style lang="scss" scoped>
  .project-upload-container{
    width:100%;
    float: left;
    height:auto;
    display: block;
  }

  .empty-file{
    width:300px;
    height: 100%;
    display: block;
    line-height: 60px;
    text-indent: 10px;
    font-size: 18px;
    float: left;
  }

  .wrapper{
    height: 50px;
  }

  .fontSize{
    font-family: '微软雅黑';
    font-size: 24px;
    color: #777;
  }

  .upload-title{
    @extend .fontSize;
    float: left;
    margin-top:8px;
  }

  .upload-icon{
    vertical-align: middle;
    display: inline-block;
    width:30px;
    height: 30px;
    background-size:cover;
    background-image: url("../../../assets/images/arrow-toggle.png");
    margin:10px 15px;
    float: left;
    cursor: pointer;
    &.is-opened{
      transform:rotate(-180deg);
    }
  }

  .open-animation{
    transition: all ease-in-out 0.3s;
  }

  .upload-input{
    width:100%;
    height:auto;
    box-sizing: border-box;
    background: white;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    margin-top: 10px;
    position: relative;
    display: none;
    float: left;
  }

  .unfold-container{
    min-height: 110px;
    padding: 10px;
    display: block;
  }

  .icon-wrapper{
    width:100px;
    height: 100px;
    display: block;
    text-align: center;
    position: relative;
    float: left;

    .icon-style{
      width:40px;
      height: 40px;
      display: inline-block;
      margin:10px 30px;
      background-size: cover;
    }


    /*<!--.icon-img{-->*/
      /*<!--@extend  .icon-style;-->*/
      /*<!--background-image: url("../../../assets/images/add.png");-->*/
    /*<!--}-->*/

    .icon-document{
      @extend  .icon-style;
      background-image: url("../../../assets/images/document.png");
    }

    .icon-video{
      @extend  .icon-style;
      background-image: url("../../../assets/images/video.png");
    }

    .icon-image{
      @extend  .icon-style;
      background-image: url("../../../assets/images/image.png");
    }

    .icon-text{
      display: inline-block;
      font-family: '微软雅黑';
      color: #777;
      font-size: 16px;
      width:80px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

  }

</style>

<template>
  <div class="project-upload-container">
    <div class="wrapper">
      <span class="upload-title">{{downloadMsg}}</span>
      <span class="upload-icon open-animation" :class="{'is-opened':show}" @click="toggle"></span>
    </div>
    <div class="upload-input open-animation" :class="{'unfold-container':show}">
      <div class="icon-wrapper" v-for="(file,index) in files">
        <span :class="'icon-'+getExtensions(index)"></span>
        <a class="icon-text"  :href="SERVER+file.url"  :title="file.name||file.file_name">{{file.name || file.file_name}}</a>
      </div>
      <div class="empty-file" v-if="files.length<=0">
        暂无文件
      </div>
      <!--<div class="icon-wrapper">-->
        <!--<span class="icon-img"></span>-->
        <!--<span class="icon-text">新增</span>-->
        <!--<input class="upload-input" name="files" @change="doUpload($event)" type="file" multiple />-->
      <!--</div>-->
    </div>
  </div>
</template>

<script>

 import { IMAGE_FORMAT,VIDEO_FORMAT,DOCUMENT_FORMAT } from  "@/conf/extension";

 import  Config from "@/conf/params";


  export default{
    name:"ContractDonwload",
    props:{
      files:{
        type:Array,
        default () {
          return []
        }
      },
      downloadMsg:{
        type:String,
        required:false,
        default:'下载附件'
      }
    },
    data(){
      return {
        show:false,
        SERVER:Config.server,
        FORMAT:{
          'IMAGE':[],
          "VIDEO":[],
          'DOCUMENT':[]
        }
      };
    },
    beforeMount(){

      var imgArr=IMAGE_FORMAT.split(',');

      for (var i=0;i<imgArr.length;i++){
        this.FORMAT['IMAGE'].push(imgArr[i]);
      }

      var videoArr=VIDEO_FORMAT.split(',');

      for (var i=0;i<videoArr.length;i++){
        this.FORMAT['VIDEO'].push(videoArr[i]);
      }

      var docArr=DOCUMENT_FORMAT.split(',');

      for (var i=0;i<docArr.length;i++){
        this.FORMAT['DOCUMENT'].push(docArr[i]);
      }

    },
    methods:{
      toggle(){
        this.show=!this.show;
      },
      isSpecificType(type,extension){

        var str=extension.toLowerCase();

        var flag=false;

        for(var i=0;i<this.FORMAT[type].length;i++){

          if (str.lastIndexOf(this.FORMAT[type][i])>=0){
            flag=true;
            break;
          }

        }

        return flag;
      },
      getExtensions(index){

        var target=this.files[index].url.replace(/^(\s*)|(\s*$)/g,'');

        var result='';
        //判断文件的显示类型
        //图片类型
        if (this.isSpecificType('IMAGE',target)){
          result='image';
        }
        //视频类型
        else if (this.isSpecificType('VIDEO',target)){
          result='video';
        }
        //文档类型
        else if(this.isSpecificType('DOCUMENT',target)){
          result='document';
        }
        else {
          result='document';
        }

        return result;
      }
    }
  }
</script>
